<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
</style>

<body>
<div style="width:100%;height: 100%;background: rgba(0,0,0,0.85);position: fixed;top:0;z-index: 3;" id="WXShadow">
    <img src="./img/arrow.png" style="position: fixed;top: 4rem;right: 5.5rem;width:25%;">
    <div style="font-size: 32px;color: #FFFFFF;position: fixed;top:17rem;width: 100%;text-align: center;">
        请在外部浏览器中打开
    </div>
</div>
</body>
<script>
    //移动端的浏览器版本都比较高，可以监听DOMContentLoaded，而不是load，load会相对慢一点点，具体按事件使用情况而定。
    document.addEventListener("DOMContentLoaded", function () {
        var USER_Agent = navigator.userAgent;
        var MOBILE_IOS = /(iPhone|iPad|iPod|iOS)/i;
        var MOBILE_Android = /(Android)/i;
        var WX = /(micromessenger)/i;

        if (WX.test(USER_Agent)) {
            //如果在微信中打开则只显示一个提示用户的罩层
            return;
        } else if (MOBILE_IOS.test(USER_Agent)) {
            document.getElementById("WXShadow").style.display = "none";
            window.location.href = "***://****"//苹果app跳转的协议
        } else if (MOBILE_Android.test(USER_Agent)) {
            document.getElementById("WXShadow").style.display = "none";
            window.location.href = "***://****"//安卓app跳转的协议
        }
        //如果没有唤起app则3秒后会跳转到下载地址，反之则不会跳转到下载地址。
        setTimeout(function () {
            window.location.href = "https://****";//下载地址
        }, 3000);
    });
</script>

</html>